import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Form, Space, Input, Button, Checkbox, Rate, Radio, Select } from 'antd';
import CutBox from '@/components/CutBox';
import LevelSelector from '@/components/LevelSelector';
import ArrowSelector from '@/components/ArrowSelector';
import { config } from '@/utils/card';
import CardFrameSelector from '../CardFrameSelector';
import styles from './style.less';
import AttributeSelector from '../AttributeSelector';

const { TextArea } = Input;
const { Item } = Form;

const CardDataForm: React.FC<{}> = (props) => {
  const { data, dispatch } = props;
  const [level, setLevel] = useState(data.level);
  const [hoverLevel, setHoverLevel] = useState(data.level);

  const [form] = Form.useForm();
  const { Option } = Select;

  const type2List = ['tc', 'xg', 'rh', 'ys', 'tt', 'cl', 'lj', 'tk'];
  const type3List = ['tc', 'tz', 'ec', 'lh', 'fz', 'ts', 'tm', 'kt'];

  const spellType2List = ['tc', 'sg', 'ys', 'zb', 'cd', 'yx'];
  const trapType2List = ['tc', 'yx', 'fj'];

  const getTypeOption = (typeList: string[]) => {
    return typeList.map(item => {
      return <Option key={item} value={item}>{config.translate.type[item]}</Option>;
    });
  };

  const handleChange = (changedValues = {}) => {
    dispatch({
      type: 'cardData/change-data',
      payload: changedValues,
    })
  };

  const handleLevelChange = (value: number) => setLevel(value);
  const handleLevelHover = (value: number) => setHoverLevel(value);

  const levelLabel = (
    <span>
      <span>等级 {level}</span>
      <span>{(!hoverLevel || hoverLevel === level) ? null : ` - ${hoverLevel}`}</span>
    </span>
  );

  const onlyMonster = (component: React.ReactElement) => {
    return data.type === 'monster' ? component : null;
  };

  const onlySpell = (component: React.ReactElement) => {
    return data.type === 'spell' ? component : null;
  };

  const onlyTrap = (component: React.ReactElement) => {
    return data.type === 'trap' ? component : null;
  };

  const onlyPendulum = (component: React.ReactElement) => {
    return data.type3 === 'lb' ? component : null;
  };

  const onlyLink = (component: React.ReactElement) => {
    return data.type2 === 'lj' ? component : null;
  };

  return (
    <div className={styles.form}>
      <Form layout={'vertical'} form={form} onValuesChange={handleChange}>
        <Item
          label="密码"
          name="_id"
          hasFeedback
          initialValue={data._id}
        >
          <Input placeholder="请输入卡名" />
        </Item>

        <Item
          label="卡名"
          name="name"
          hasFeedback
          initialValue={data.name}
        >
          <Input placeholder="请输入卡名" />
        </Item>

        <Item label="这是一张什么颜色的卡呢" name="card-type">
          <CardFrameSelector />
        </Item>

        <Item label="详细类型">
          {onlyMonster(
            <Space className={styles.multi}>
              <Item name="type3" initialValue={data.type3}>
                <Select placeholder="请选择卡片类型" allowClear>
                  {getTypeOption(type3List)}
                </Select>
              </Item>
              <Item name="type4" initialValue={data.type4}>
                <Select placeholder="请选择卡片类型" allowClear>
                  {getTypeOption(type3List)}
                </Select>
              </Item>
            </Space>
          )}
          {onlySpell(
            <Item name="type2" initialValue={data.type2}>
              <Select placeholder="请选择卡片类型" allowClear>
                {getTypeOption(spellType2List)}
              </Select>
            </Item>
          )}
          {onlyTrap(
            <Item name="type2" initialValue={data.type2}>
              <Select placeholder="请选择卡片类型" allowClear>
                {getTypeOption(trapType2List)}
              </Select>
            </Item>
          )}
        </Item>

        {onlyLink(
          <Item label="链接箭头" name="link" initialValue={data.link} valuePropName="link">
            <ArrowSelector />
          </Item>
        )}

        {onlyMonster(
          <Item label="属性" name="attribute" initialValue={data.attribute} valuePropName="attribute">
            <AttributeSelector />
          </Item>
        )}

        {onlyMonster(
          <Item label={levelLabel} name="level" initialValue={data.level} valuePropName="level">
            <LevelSelector onChange={handleLevelChange} onHoverChange={handleLevelHover} />
          </Item>
        )}

        {onlyMonster(
          <Item label="种族" name="race" initialValue={data.race}>
            <Input addonAfter="族" />
          </Item>
        )}

        <Item label="卡图"><CutBox /></Item>

        <Item label="效果" name="desc" initialValue={data.desc}>
          <TextArea autoSize={{ minRows: 1, maxRows: 3 }} />
        </Item>

        {onlyMonster(
          <Item label="攻击 / 防御">
            <Space className={styles.multi}>
              <Item name="attack" initialValue={data.attack}>
                <Input placeholder="攻击力" />
              </Item>
              <Item name="defend" initialValue={data.defend}>
                <Input placeholder="防御力" />
              </Item>
            </Space>
          </Item>
        )}
      </Form>
    </div>
  );
}

const mapStateToProps = ({ cardData }) => {
  const { data } = cardData;
  return {
    data,
  }
};

export default connect(mapStateToProps)(CardDataForm);
